<template>
  <div>
    <el-form>
      <el-col :span="24">
        <el-form-item label="地区选择" prop="areaCode">
          <el-cascader v-model="areasParam.cityCodeList" :props="areasProps" @change="
            res =>
              baseAreaConfirm({
                res: res,
                area: res[areasParam.level],
                codeField: 'areaCode'
              })
          " style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance, nextTick, watch, onBeforeUnmount } from "vue";
// import { findSubAreas } from "@/api/modules/areas";
// import localAreaData from "@/assets/json/areaLevel3.min.json"; // 本地地区json数据
// import localAreaData from "@/assets/json/areaLevel4.min.json"; // 本地地区json数据
import { getReadFiles } from "@/api/modules/system"; // 获取文件

const state = reactive({
  form: {
    areaCode: ""
  }
});

// #region 地区选择模块

// 地区组件参数
const areasParam = reactive({
  localAreaData: [], // 本地地区数据
  useLocalAreasData: true, // true=使用本地地区json数据，false=使用接口地区数据
  level: 2, // 地区层级（层级=-1）（0-省（一级）, 1-市（二级）, 2-区/县（三级）, 3-镇/街道（四级））
  cityCodeList: [], // 地区数组
  labelName: "name", // 自定义label属性名
  valueName: "code", // 自定义name属性名
  keyName: "id" // 自定义唯一标识
});

// 地区选择最终获取数据
const baseAreaConfirm = e => {
  // console.log(e);
  state.form[e.codeField] = e.area;
};

// 获取地区列表（本地数据）
const getLocalAreas = ({ parentCode, key }) => {
  const findAreaByCode = (areas, code) => {
    for (let area of areas) {
      // 根据是否有id来决定判断条件
      const isMatch = key !== undefined
        ? area[areasParam.valueName] === code && area[areasParam.keyName] == key
        : area[areasParam.valueName] === code;
      if (isMatch) {
        return area;
      }
      if (area.children && area.children.length > 0) {
        const result = findAreaByCode(area.children, code);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };
  const root = findAreaByCode(areasParam.localAreaData, parentCode);
  return root ? root.children : areasParam.localAreaData;
};

// 获取地区列表文件数据
const getReadAreaFiles = async () => {
  const res = await getReadFiles({
    fileName: "areaLevel3.min.json"
  });
  if (res.code == 200) {
    areasParam.localAreaData = JSON.parse(res.data);
  } else {
    ElMessage.error("获取地区列表文件数据失败");
    console.error("获取地区列表文件数据失败", res);
    return;
  }
};

// 获取地区列表（接口数据）
const getApiAreas = ({ parentCode }) => {
  return new Promise((resolve, reject) => {
    findSubAreas({ parentCode }).then(res => {
      resolve(res.data);
    });
  });
};

// 地区Cascader级联选择器加载
const areasProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const level = node.level;
    const parentCode = level === 0 ? 0 : node.value;
    const key = node.data.key
    let data = [];
    if (areasParam.useLocalAreasData && areasParam.localAreaData.length === 0) {
      await getReadAreaFiles();
    }
    if (areasParam.useLocalAreasData) {
      // 从本地数据获取
      data = await getLocalAreas({ parentCode, key: key });
    } else {
      // 从接口获取
      data = await getApiAreas({ parentCode });
    }
    const options = data.map(item => ({
      value: item[areasParam.valueName],
      label: item[areasParam.labelName],
      leaf: level >= areasParam.level,
      key: item[areasParam.keyName], // 保留自定义唯一标识字段
    }));
    resolve(options);
  }
};
// #endregion

// #region 地区回显模块优化代码
const changeArea = async (codeVal, paramName) => {
  if (codeVal !== undefined) {
    const form = {
      provinceCode: codeVal.substring(0, 2) + "0000000000",
      cityCode: codeVal.substring(0, 4) + "00000000",
      // streetCode: codeVal.substring(0, 6) + "000000", // 三级地区注释此行
      codeVal
    };
    const addressVal = await expertQueryAreas(form);
    state.ruleForm[paramName] = addressVal; // 对象用
    return addressVal; // 列表用
  }
};

const expertQueryAreas = async form => {
  const codes = [
    form.provinceCode,
    form.cityCode,
    // form.streetCode, // 三级地区注释此行
    form.codeVal
  ];
  const names = await Promise.all(
    codes.map(async (code, index) => {
      const parentCode = index === 0 ? 0 : codes[index - 1];
      const areas = await getApiAreas({ parentCode });
      const foundItem = areas.find(item => item.code === code);
      return foundItem ? foundItem.name : "";
    })
  );
  return names.join("");
};
// #endregion

// 列表用法
// const getList = async () => {
//   const res = await getDemandList(state.queryParams);
//   if (res.code == 200) {
//     state.list = await Promise.all(
//       res.rows.map(async item => {
//         if (item.addressCode) {
//           item.addressCodeChange = await changeArea(item.addressCode);
//         }
//         return item;
//       })
//     );
//     state.queryTotal = res.total;
//   }
// };
</script>

<style scoped></style>
